<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta name="csrf-token" content="{{csrf_token()}}">
    <title>系统名称</title>
    <link rel="stylesheet" href="{{asset('css/select.css')}}">
    <link rel="stylesheet" href={{asset('css/swiper-bundle.min.css')}}>
    <link rel="stylesheet" href={{asset('iconfont/iconfont.css')}}>
    <style>
        body {
            background-image: url("./images/1920bg.jpg");
        }
    </style>
</head>

<body>
    <div id="app">
        <title>动感单车</title>
        <div class="content-container">
            <!-- 循环riding_status -->
            <div class="view-container" v-for="(item,index) in riding_status" :key='item.id'
                @click='enter_view(item.id,index)' :style="{backgroundImage:`url(${item.img})`,
            backgroundRepeat:'no-repeat',backgroundSize:'cover'}">
                <img>
                <p class="title-p">@{{item.name}}</p>
                <!-- 提示正在骑行中 -->
                <!-- <div class="riding-tips-container" v-show='item.is_using'> -->
                <!-- <div class="riding-tips-container" v-if='item.is_using' v-cloak> -->
                <div class="riding-tips-container" v-if='item.is_using'>
                    <i class="iconfont icon-loading"></i>
                    <p class="riding-tips">骑行中</p>
                    <div class="sign-out-container">
                        <!-- 退出图片 -->
                        <img @click.stop='sign_out(index)' class="sign_out_btn" src={{asset('images/sign_out.png')}}>
                    </div>
                </div>
                <!-- 开始答题容器 -->
                <div class="start-answer-container" @click.stop='open_qrcode(index)' v-cloak>
                    <!-- v-if='item.is_done' -->
                    <img src="{{asset('images/startAnswer.png')}}">
                </div>

                <!-- 确定退出的遮罩层 -->
                <div class="quit-mask-container" ref="quitMaskRef">
                    <div>
                        <img src={{asset('images/interrupt.png')}} class="interrupt-img">
                    </div>
                    <div>确定退出场景吗？</div>
                    <div>
                        <!-- 确认退出 -->
                        <img class="confirm-quit-img" src={{asset('images/confirm.png')}}
                            @click.stop='confirm_quit(index)'>
                        <!-- 取消按钮 -->
                        <img class="cancel-img" src={{asset('images/cancel.png')}} @click.stop='mask_loop_cancel'>
                    </div>
                </div>

            </div>
            <!-- 切换场景时候的遮罩层 最外层 -->
            <div class="mask-container" v-if='changeMaskFlag'>
                <div class="mask-content-container">
                    <div>
                        <img src={{asset('images/interrupt.png')}} alt="" class="interrupt-img">
                    </div>
                    <div>确定更换场景吗？</div>
                    <div>
                        <img class="confirm-img" src={{asset('images/confirm.png')}}
                            @click.stop='confirm_change(confirmId)'>
                        <img class="cancel-img" src={{asset('images/cancel.png')}} @click.stop='mask_cancel'>
                    </div>
                </div>
            </div>
            <!-- 用户点击开始答题。出现二维码。最外层 -->
            <div class="qrcode-container" @click.stop="prevent_def">
                <img :src="qrcodeSrc" class="qrcode-img">
                <p>长按二维码，进入答题页面</p>
                <i class="iconfont icon-guanbi" @click.stop="close_qrcode()"></i>
            </div>
            <!-- 设备正在使用中的提示 -->
            <div class="riding-mask-container" ref='maskRef' v-if='maskFlag'>
                <div class="mask-content-container">
                    <div>
                        <img src={{asset('images/interrupt.png')}} alt="" class="interrupt-img">
                    </div>
                    <div>当前设备已有用户正在使用，确定继续？</div>
                    <div>
                        <img class="confirm-img" src={{asset('images/confirm.png')}} @click.stop='confirm_login'>
                        <img class="cancel-img" src={{asset('images/cancel.png')}} @click.stop='mask_cancel'>
                    </div>
                </div>
            </div>


            <!-- 敬请期待 -->
            <div class="view-container" v-for='item in not_open_views' :key='item.id' :style="{backgroundImage:`url(${item.src})`,
                backgroundRepeat:'no-repeat',
                backgroundSize:'cover'}">
            </div>
        </div>
    </div>

</body>
<!-- <script src={{asset('js/swiper-bundle.min.js')}}></script> -->
<script src="{{asset('js/jquery.min.js')}}"></script>
<script src="{{asset('js/vue.min.js')}}"></script>
<script>
    // 扫码进入场景的设备的SID
    const sid = @json($sid);
    console.log(sid, 'sid');
    let riding_status =@json($riding_status);
    console.log(riding_status);
    // return;
    // riding_status=riding_status.map(item=>JSON.parse(item));
    riding_status = JSON.parse(riding_status);
    // console.log(riding_status, 'ridingStatus');
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')    //携带csrf_token，否则会返回错误500
        }
    });
    // 自执行函数
    (function () {
        // 取消移动端轮播图
        //判断横竖屏
        $(window).resize(() => {
            let w = $("body").width();
            let h = $("body").height();
            // console.log(w);
            // console.log(h);
            if (w > h) {
                // 横屏
                // console.log('heng');
                $('.swiper-container').css('flex-grow', 2)
                $('header').css('display', 'block')
                $('.col-blank').css('display', 'block')
                $('.horizontal-tip-container').css('display', 'none')
            } else {
                // alert("竖屏");
                //    $('header').css('flex-grow',0)
                $('.swiper-container').css('flex-grow', 0)
                $('header').css('display', 'flex')
                $('.col-blank').css('display', 'none')
                $('.horizontal-tip-container').css('display', 'block')
            }
        })
        // 第一次打开网页手动判断
        $(window).resize();
    })()
    var app = new Vue({
        el: '#app',
        data() {
            return {
                sid,
                confirmId: -1,
                // 当前场景ID
                activeView: -1,
                // 上一个场景的ID
                oldViewId: -1,
                // 当前这个设备是否在使用
                is_using: false,
                // 判断这个用户是否在骑行，逻辑或
                usingFlag: false,
                // 第一次ajax请求的是否已经有用户的flag。
                maskFlagTemp:false,
                // 当前设备已经有用户，是否继续的flag
                maskFlag: false,
                // 切换场景遮罩层的flag
                changeMaskFlag: false,
                // 每一个场景的退出遮罩层
                // quitMaskFlag: false,
                riding_status: [],
                qrcodeSrc: '',
                views: [{
                    img: '/images/01.jpg',
                    name: '中国共产党的创建和投身大革命的洪流',
                    id: 0,
                    qrcode: '/images/qrcode1.png'
                }, {
                    img: '/images/02.jpg',
                    name: '掀起土地革命的风暴',
                    id: 1,
                    qrcode: '/images/qrcode2.png'
                }, {
                    img: '/images/03.jpg',
                    name: '全民族抗日战争的中流砥柱',
                    id: 2,
                    qrcode: '/images/qrcode3.png'
                }],
                not_open_views: [{
                    id: 0,
                    src: "{{asset('images/next.jpg')}}"
                }, {
                    id: 1,
                    src: "{{asset('images/next.jpg')}}"
                }],
                qrcodes: ["/images/qrcode1.png", "/images/qrcode2.png", "/images/qrcode3.png"],
            }
        },
        computed: {

        },
        watch: {
            // 进入场景
            activeView: {
                handler(newval, oldval) {
                    if (newval !== -1) {
                        // 进入了场景发送请求
                        this.oldViewId = oldval;
                        this.activeView = newval;
                        console.log(oldval, newval, 'oldAndNew');
                    }
                },
                immediate: true,

            },
            riding_status: {
                // 通过riding_status的is_using来判断confirmId为多少
                handler(newVal, oldVal) {
                    for (let i in newVal) {
                        newVal[i].quitMaskFlag = false;
                        if (newVal[i].is_using === true) {
                            console.log('is_using');
                            // this.confirmId = newVal[i].id;
                            this.activeView = newVal[i].id;
                            this.usingFlag = true;
                        } else {
                            // 没有骑车
                            this.usingFlag = false;
                            this.activeView = -1;
                        }
                        if (newVal[i].is_done === true) {
                            console.log('isdooneTrue');
                            $('.start-answer-container').eq(i).css('display', 'block')
                        } else {
                            console.log('doneisFalse');
                            $('.start-answer-container').eq(i).css('display', 'none')
                        }

                    }
                },
                immediate: true,
                deep: true
            }

        },
        methods: {
            ajaxReq(msg) {
                console.log(msg, 'ajax进入场景');
                // return;
                $.ajax({
                    type: 'POST',
                    url: '/appuser/msg/push',
                    data: {
                        id: sid,
                        msg
                    },
                    success: function (data) {
                        console.log(data, '  success');

                    },
                    error: data => {
                        console.log(data);
                    }
                });
            },
            // ajax轮询请求设备状态
            // 推荐5-10秒轮询一次
            ajaxReqOfStatus() {
                // console.log(this.riding_status,'ajax外层');
                let that = this;
                // 第一次请求设置maskFlag，后面的请求不再设置maskFlag
                $.ajax({
                    url: '/select-status',
                    type: 'POST',
                    data: {
                        sid
                    },
                    async:false,
                    success(res) {
                        res = JSON.parse(res)
                        console.log('res&ajax成功', res);
                        // 查询设备是否在使用中
                        that.usingFlag = res.some(item => item.is_using === true)
                        that.riding_status = res;
                        if (that.usingFlag === true) {
                            console.log('maskflagtemp==true');
                            that.maskFlagTemp = true;
                        }else{
                            console.log('maskflagtemp==false');
                        }
                    },
                    error(res) {
                        console.log(res);
                    }
                })
            },

            // 点击，进入场景
            enter_view(id, index) {
                // console.log(id,'当前场景ID');
                // console.log('activeView',this.activeView);
                // console.log('usingflag',this.usingFlag);
                for (let i in riding_status) {
                    if (riding_status[i].is_using === true) {
                        this.usingFlag = true;
                        console.log('usingFlag', this.usingFlag);
                    }
                }
                // 点击正在运行的本场景
                if (id === this.activeView) return false;
                if (!this.usingFlag) {
                    // 无人骑车
                    this.activeView = id;
                    this.usingFlag = true;
                    $('.riding-tips-container').css('display', 'none');
                    // $('.riding-tips-container').eq(index).css('display', 'flex');
                    this.riding_status[index].is_using = true;
                    if (id === 0) {
                        this.ajaxReq(20)
                    } else if (id === 1) {
                        this.ajaxReq(21)
                    } else if (id === 2) {
                        this.ajaxReq(22)
                    }
                } else {
                    // 有人骑车
                    // console.log('有人');
                    // 将要进入的场景
                    // console.log(id,'要进入的ID');
                    this.confirmId = id;
                    console.log('有人骑车');
                    // $('.mask-container').css('display', 'flex')
                    this.changeMaskFlag = true;
                }
            },
            // 点击,退出按钮
            sign_out(i) {
                // 退出弹出层没有和riding_status绑定，所以用index
                console.log(i);
                // console.log(this.$refs.quitMaskRef);
                // console.log(this.$refs.quitMaskRef[i].style);
                this.$refs.quitMaskRef[i].style.display = 'flex';
                // $('.riding-tips-container').css('display', 'none')
                // $('.quit-mask-container').eq(i).css('display', 'flex')
                // this.riding_status[i].quitMaskFlag = false;
                // console.log(this.riding_status[i]);

                // console.log(307);

            },
            // 点击遮罩层的取消
            mask_cancel() {

                this.maskFlag = false;
                this.changeMaskFlag = false;

            },
            // 循环体里面的遮罩层的取消
            mask_loop_cancel() {
                $('.quit-mask-container').css('display', 'none')
            },
            // 确认切换场景 更换场景 最外层遮罩层，所以无法传递index
            confirm_change(i) {
                console.log(i);//confirmId
                console.log('之前的activeView', this.activeView);
                this.activeView = i;
                // $('.mask-container').css('display', 'none')
                this.changeMaskFlag = false;
                $('.riding-tips-container').css('display', 'none');
                // $('.riding-tips-container').eq(i).css('display', 'flex');
                this.riding_status[i].is_using = true;
                if (i === 0) {
                    this.ajaxReq(20)
                } else if (i === 1) {
                    this.ajaxReq(21)
                } else if (i === 2) {
                    this.ajaxReq(22)
                }
            },
            // 确认退出当前场景
            confirm_quit(index) {
                console.log(index);
                // return;
                this.activeView = -1;
                this.usingFlag = false;
                console.log($('.riding-tips-container').eq(index));
                $('.quit-mask-container').eq(index).css('display', 'none')
                // $('.riding-tips-container').eq(index).css('display', 'none')
                this.riding_status[index].is_using = false;
                this.ajaxReq(100)
            },
            // 确认登入场景，挤掉前面的用户
            confirm_login() {
                console.log('login');
                this.ajaxReq(100)
                // console.log(this.$refs.maskRef.style);
                // this.$refs.maskRef.style.display = 'none'
                this.maskFlag = false;
            },
            // 打开答题二维码
            open_qrcode(ind) {
                console.log(ind);
                // $('.start-answer-container').eq(ind).css('display', 'none')
                this.qrcodeSrc = this.qrcodes[ind]
                $('.qrcode-container').css('display', 'flex')
            },
            close_qrcode() {
                // $('.start-answer-container').eq(ind).css('display', 'block')
                $('.qrcode-container').css('display', 'none')
            },
            // 防止穿透
            prevent_def() {
                // console.log('prevent');
                return false
            },

        },
        created() {
            // 第一次判断是否在使用中
            this.riding_status = riding_status;
            console.log(this.riding_status, 'this.riding_status');
            this.ajaxReqOfStatus();
            this.maskFlag=this.maskFlagTemp;
            console.log(this.maskFlagTemp,'temp');
            console.log('confirmId', this.confirmId);
            // 测试完成记得放开注释
            let that = this;
            setInterval(function () {
                that.ajaxReqOfStatus();
                console.log(that.riding_status);
            }, 10000)
        },
    })

</script>

</html>
